<template>
  <div class="header-container">
    <div class="search-box">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索音乐、歌手、歌词、用户"
        class="search-input"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="user-info">
      <el-avatar :size="32" :src="avatarUrl" />
      <span class="username">未登录</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchKeyword = ref('')
const avatarUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { q: searchKeyword.value }
    })
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.search-box {
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}

.username {
  font-size: 14px;
  color: #606266;
}
</style>
